<template>
    <div class="main_content">
        <div id="bedroom"></div>
    </div>
</template>
<script>
    import echarts from "echarts";
    export default {
        data() {
            return{

            }
        },
        methods: {
            drawPie(id) {
                this.chart = echarts.init(document.getElementById(id));
                this.chart.setOption({
                    title: {
                        text: "未来一周气温变化",
                        subtext: "纯属虚构"
                    },
                    tooltip: {
                        trigger: "axis"
                    },
                    legend: {
                        data: ["最高气温", "最低气温"]
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ["line", "bar"]},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: "category",
                            boundaryGap: false,
                            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
                        }
                    ],
                    yAxis: [
                        {
                            type: "value",
                            axisLabel: {
                                formatter: "{value} °C"
                            }
                        }
                    ],
                    series: [
                        {
                            name: "最高气温",
                            type: "line",
                            data: [11, 11, 15, 13, 12, 13, 10],
                            markPoint: {
                                data: [
                                    {type: "max", name: "最大值"},
                                    {type: "min", name: "最小值"}
                                ]
                            },
                            markLine: {
                                data: [{type: "average", name: "平均值"}]
                            }
                        },
                        {
                            name: "最低气温",
                            type: "line",
                            data: [1, -2, 2, 5, 3, 2, 0],
                            markPoint: {
                                data: [{name: "周最低", value: -2, xAxis: 1, yAxis: -1.5}]
                            },
                            markLine: {
                                data: [{type: "average", name: "平均值"}]
                            }
                        }
                    ]
                });
            }
        },
        mounted() {
            this.drawPie("bedroom");
        }
    };
</script>
<style scoped>
    #bedroom {
        position: relative;
        left: 50%;
        margin-left: -400px;
        margin-bottom: 70px;
        width: 800px;
        height: 600px;
        border: solid #d01257 1px;
        box-shadow: 0 0 8px #fb90b7;
        border-radius: 10px;
    }
</style>